<template>
  <div class="bank-manager-wrap">
    <div class="bank-info-box">
      <img src="./UnionPay.png" class="pic1" onclick="return false"/>
      <div class="bank-info">
        <span class="bank-name">{{bankName}}</span>
        <span class="bank-num">尾号{{cardNum}}{{cardType}}</span>
      </div>
    </div>

    <div class="bank-item-content-box" @click="modifyWithPage">
      <div class="item-content">
        <span class="item-content-title">修改提现密码</span>
        <img src="../../images/in.png" class="pic3" onclick="return false"/>
      </div>
    </div>

    <div class="bank-item-content-box" @click="changeCard">
      <div class="item-content">
        <span class="item-content-title">银行卡换绑</span>
        <img src="../../images/in.png" class="pic3" onclick="return false"/>
      </div>
    </div>

  </div>
</template>

<script>
  import {selectBindBankCard} from "../../axios/api";

  export default {
    data() {
      return {
        cardType: "",
        cardNum: "",
        bankName: "",
        userMark: ""
      }
    },
    created() {
      this.cardType = this.$route.query.cardType;
      this.cardNum = this.$route.query.cardNum;
      this.bankName = this.$route.query.bankName;
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      modifyWithPage() {
        this.$router.push({
          path: "/modifyDrawPwd",
          query: {
            "showPage": 1
          }
        });
      },
      changeCard() {//换绑页
        let params = {
          "sgin": this.userMark
        };
        selectBindBankCard(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null) {
              if (res.data.bankNumber != "" && res.data.bankNumber != null && res.data.bankNumber != undefined) {//换绑
                sessionStorage.setItem("proxy_sys_phone", res.data.phone);//系统手机号
                let certNum = this.$decruption(res.data.identityNo);
                this.$router.push({
                  path: "/bankCardUnBind",
                  query: {
                    "certNum": certNum,
                    "userName": res.data.userName,
                    "showPage": 1
                  }
                });
              }
            }
          }
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .bank-manager-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .bank-info-box {
      display: flex;
      align-items: center;
      .wh(100%, 1.76rem);
      background: #FFF;
      margin-bottom: 0.267rem;
      .pic1 {
        .wh(1.28rem, 1.28rem);
        margin-left: 0.32rem;
      }
      .bank-info {
        display: flex;
        flex-direction: column;
        margin-left: 0.453rem;
        .bank-name {
          .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
          padding-bottom: 0.2rem;
        }
        .bank-num {
          .size-color(0.347rem, rgba(153, 153, 153, 1));
        }
      }
    }
    .bank-item-content-box {
      .wh(100%, 1.333rem);
      background: rgba(255, 255, 255, 1);
      display: flex;
      .item-content {
        .wh(96.8%, 1.333rem);
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        border-bottom: 0.027rem solid #f2f2f2;
        .item-content-title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .pic3 {
          margin-left: auto;
          margin-right: 0.32rem;
          .wh(0.32rem, 0.32rem);
        }
      }
    }
  }
</style>
